<template>
  <div class="app-container check">
    <!-- <p>DEBUG: {{ checkList }}</p> -->

    <mu-container>
      <mu-row>
        <mu-switch v-model="docked" style="margin-left: 16px" label="隐藏总览"></mu-switch>
      </mu-row>
      <question-list v-show="!docked" ref="questionList" @edit="question = $event"></question-list>
      <mu-row>
        <mu-switch v-show="!docked" v-model="docked" style="margin-left: 16px" label="隐藏总览"></mu-switch>
      </mu-row>
    </mu-container>

    <question-displayer v-if="question !== null" ref="questionDisplayer" :is-changed.sync="isChanged" :question="question" ></question-displayer>

    <mu-flex class="check-actions" justify-content="center">
      <mu-button class="check-actions-button" color="primary">
        <mu-icon value="arrow_back"></mu-icon>
        <span>上一题（暂时没用）</span>
      </mu-button>
      <mu-button v-loading="saving" v-if="isChanged" class="check-actions-button" color="secondary" @click="saveChange()">
        <mu-icon value="save"></mu-icon>
        <span>保存修改</span>
      </mu-button>
      <mu-button class="check-actions-button" color="error" @click="handleRemove()">
        <mu-icon value="clear"></mu-icon>
        <span>删除</span>
      </mu-button>
      <mu-button v-loading="failing" class="check-actions-button" color="warning" @click="fail()">
        <mu-icon value="clear"></mu-icon>
        <span>拒绝</span>
      </mu-button>
      <mu-button v-loading="passing" class="check-actions-button" color="success" @click="pass()">
        <mu-icon value="done"></mu-icon>
        <span>通过</span>
      </mu-button>
    </mu-flex>

    <mu-dialog
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="remove.dialog"
      title="警告"
      width="600"
      max-width="80%">
      <p>删除不可恢复，确定删除？</p>
      <mu-button slot="actions" flat color="primary" @click="remove.dialog = false">取消</mu-button>
      <mu-button v-loading="remove.removing" slot="actions" flat color="primary" @click="confirmRemove()">确定</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchNextQuestion, updateQuestion, checkQuestion, removeQuestion } from '@/api/questions'
import QuestionList from './QuestionList'
import QuestionDisplayer from './QuestionDisplayer'

export default {
  name: 'Check',
  components: {
    QuestionDisplayer,
    QuestionList
  },
  data() {
    return {
      question: null,
      checkList: [],
      docked: false,
      isChanged: false,
      passing: false,
      failing: false,
      remove: {
        dialog: false,
        removing: false
      },
      saving: false
    }
  },
  computed: {
    ...mapGetters({
      types: 'types/options'
    })
  },
  async mounted() {
    this.next()
  },
  methods: {
    async pass() {
      this.passing = true
      try {
        const data = this.$refs.questionDisplayer.editForm
        const id = data.id
        await checkQuestion(id, true)
        this.question = await fetchNextQuestion()
        this.$refs.questionList.fetch()
        this.$toast.success('通过成功')
      } catch (err) {
        this.$report(err)
      }
      this.passing = false
    },
    async fail() {
      this.failing = true
      try {
        const data = this.$refs.questionDisplayer.editForm
        const id = data.id
        await checkQuestion(id, false)
        this.question = await fetchNextQuestion()
        this.$refs.questionList.fetch()
        this.$toast.success('拒绝成功')
      } catch (err) {
        this.$report(err)
      }
      this.failing = false
    },
    async next() {
      try {
        const data = await fetchNextQuestion()
        this.question = data
      } catch (err) {
        this.$report(err)
      }
    },
    handleRemove() {
      this.remove.dialog = true
    },
    async confirmRemove() {
      this.remove.removing = true
      try {
        await removeQuestion(this.question.id)
        this.question = await fetchNextQuestion()
        this.$refs.questionList.fetch()
        this.$toast.success('删除成功')
      } catch (err) {
        this.$report(err)
      }
      this.remove.dialog = false
      this.remove.removing = false
    },
    async saveChange() {
      this.saving = true
      try {
        const data = this.$refs.questionDisplayer.editForm
        const id = data.id
        await updateQuestion(id, data)
        this.question = data
        this.$refs.questionList.fetch()
        this.$toast.success('保存成功')
      } catch (err) {
        this.$report(err)
      }
      this.saving = false
    }
  }
}
</script>

<style lang="scss">
.check {
  .check-actions-button {
    margin: 0 10px;
  }
}
</style>
